<template>
  <div class="login-container">
    <el-switch
      v-model="loginType"
      active-text="短信登录"
      inactive-text="密码登录"
      class="login-switch"
    ></el-switch>

    <div v-if="loginType">
      <!-- 短信登录表单 -->
      <el-input v-model="phone" placeholder="请输入手机号"></el-input>
      <el-input
        v-model="smsCode"
        placeholder="请输入验证码"
        style="margin-top: 1rem"
      ></el-input>
      <el-button type="primary" style="width: 100%; margin-top: 1rem"
        >登录</el-button
      >
    </div>
    <div v-else>
      <!-- 密码登录表单 -->
      <el-input v-model="username" placeholder="请输入账号名"></el-input>
      <el-input
        v-model="password"
        type="password"
        placeholder="请输入密码"
        style="margin-top: 1rem"
      ></el-input>
      <el-button type="primary" style="width: 100%; margin-top: 1rem"
        @click="passwordLogin"
        >登录</el-button
      >
    </div>

    <div class="links">
      <a href="#">忘记密码</a>
      <a href="#">免费注册</a>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { passwordLoginAPI, smsLoginAPI} from "@/apis/user";

const loginType = ref(false);
const phone = ref("");
const smsCode = ref("");
const username = ref("");
const password = ref("");
const passwordLogin = () => {
  passwordLoginAPI({
    username: username.value,
    password: password.value,
  }).then((res) => {
    console.log(res);
  });
};

const smsLogin = () => {
  smsLoginAPI({
    phone: phone.value,
    code: smsCode.value,
  }).then((res) => {
    console.log(res);
  });
};
</script>

<style scoped lang="scss">
.login-container {
  width: 25rem;
  margin: auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  .login-switch {
    margin-bottom: 2rem;
  }

  .links {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
  }
}
</style>
